<template>
  <div class="loginEntry">
    <div class="pic">
      <el-carousel height="980px">
        <el-carousel-item v-for="item in imgArr" :key="item">
          <img :src="item" alt="" style="width: 100%; height: 96%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--左侧系统名称-->

    <!--右侧登录框-->
    <div class="loginFather">
      <div class="loginBox">
        <div class="title">
          <p>智慧林场数字化管理平台</p>
          <p>Intelligent Forest Farm digital management platform</p>
          <!--<span>人兽冲突监管平台</span>-->
        </div>
        <div class="loginData">
          <ul>
            <div class="loginTitle">用户登录</div>
            <li>
              <div class="input">
                <div>
                  <img src="/static/img/people.png" alt="" />
                </div>
                <input v-model="username" placeholder="请输入登录ID" />
              </div>
            </li>
            <li>
              <div class="input">
                <div>
                  <img src="/static/img/MIMA.png" alt="" style="width: 0.24rem; left: 0.18rem" />
                </div>
                <input v-model="password" placeholder="请输入密码" type="password" id="pwd_input" />
              </div>
            </li>
            <li>
              <div class="icon">
                <el-checkbox v-model="checked"></el-checkbox>
                <span>记住密码</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="loginButton">
          <button @click="login" id="loginBut">登&nbsp;&nbsp;录</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../utils/http';
import api from '../utils/api';
export default {
  data() {
    return {
      showNo: true,
      username: '',
      imgArr: [
        "/static/images/c1.jpg",
        "/static/images/c2.png",
        "/static/images/c4.png",
        "/static/images/c5.png"
      ],
      password: '',
      checked: false,
      areaId: '',
      identifyUser: '',
      roles: [],
    }
  },
  created() {
  },
  mounted() {
    $('#pwd_input').bind('keyup', function (event) {
      if (event.keyCode == "13") {
        //回车执行查询
        $('#loginBut').click();
      }
    });
  },
  methods: {
    login() {
      var vm = this;
      (async function () {
        let params = {
          grant_type: 'password',
          username: vm.username,
          password: vm.password
        }
        const re = await http.login(api.login, params)

        if (re.data.access_token) {
          (async function () {
            let res = await http.get(api.login_user, {});
            if (typeof (res.data.area) == "undefined") {
              vm.$message({
                type: 'error',
                message: '登录超时，请重新登录'
              });
            } else {
              if (res.data.roles.indexOf('ROLE_ADMIN') == -1 && res.data.roles.indexOf('ROLE_OPERATE') == -1 && res.data.roles.indexOf('FORESTFARM_ADMIN') == -1 && res.data.roles.indexOf('FORESTFARM_PRINCIPAL') == -1) {
                vm.$message({
                  type: 'error',
                  message: '暂无权限'
                });
              } else {
                if (vm.checked == true) {
                  localStorage.setItem("userName", JSON.stringify(vm.username));//保存用户名
                }
                window.sessionStorage.setItem("areaId", res.data.area);//保存areaId
                window.sessionStorage.setItem('workTypes', res.data.workTypes);
                vm.$message({
                  type: 'success',
                  message: res.data.zhName + ",登录成功"
                });
                vm.$router.push('/home');
              }
            }
          })()
        } else {
          vm.$message({
            type: 'error',
            message: "用户名或密码错误"
          });
          vm.username = "";
          vm.password = "";
        }
      })();
    },
  }
}
</script>
<style scoped>
@import "../../static/css/loginEntry.css";
</style>
<style>
.loginEntry .el-checkbox__inner {
  background: transparent;
  border: 2px solid #b07f00;
}

.loginEntry .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: transparent;
}

.loginEntry .el-checkbox__inner::after {
  left: 3px;
}
</style>
